<template>
  <div class="tab-title-page goods_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.order_no" style="width:220px" placeholder="请输入订单号" clearable />
        </el-form-item>
        <!-- <el-form-item label="退款类型">
          <el-select
            v-model="searchForm.refund_type"
            placeholder="全部"
            clearable
          >
            <el-option :value="1" label="仅退款"></el-option>
            <el-option :value="2" label="退款退货"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="售后状态">
          <el-select v-model="searchForm.refund_status" placeholder="全部" clearable @change="changeSelect">
            <!-- <el-option :value="1" label="仅退款"></el-option> -->
            <el-option :value="2" label="待审核" />
            <el-option :value="3" label="商家已审核" />
            <el-option :value="4" label="商家拒绝" />
            <el-option :value="5" label="平台拒绝" />
            <el-option :value="6" label="已退款" />
            <el-option :value="7" label="已撤销" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="searchForm.shopname" placeholder="请输入供应商" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane :label="`全部(${count.order_total_count})`" name="0" />
      <el-tab-pane :label="`用户申请退款(${count.user_apply_refund})`" name="2" />
      <el-tab-pane :label="`平台待审核(${count.admin_nocheck})`" name="3" />
      <el-tab-pane :label="`退款完成(${count.refund_finish})`" name="6" />
      <el-tab-pane :label="`审核拒绝(${count.refund_rufuse})`" name="4" />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
      </div>
      <div class="list_wrap">
        <div class="flex list_header">
          <p style="width:27%;padding-left:15px">订单信息</p>
          <p class="text-center" style="width:4%">数量</p>
          <p class="text-center" style="width:10%">金额</p>
          <p class="text-center" style="width:9%">应补足金额</p>
          <p class="text-center" style="width:9%">押金</p>
          <p class="text-center" style="width:8%">退款类型</p>
          <p class="text-center" style="width:15%">退款原因</p>
          <p class="text-center" style="width:10%">售后状态</p>
          <p style="width:16%;padding-left:40px">操作</p>
        </div>
      </div>
      <div v-for="item in tableData" :key="item.id" class="list_item">
        <div class="flex justify-between align-center item_header">
          <div class="flex-1 flex align-center">
            <p>订单号：{{ item.trade_no }}</p>
            <p>申请时间：{{ item.create_time }}</p>
            <p>供应商：{{ item.shopname }}</p>
          </div>
        </div>
        <div class="flex item_row">
          <div class="flex" style="width:25%">
            <el-image style="width:60px;height:60px" :src="item.imgurl ? $globalObj.imgBaseUrl + item.imgurl : ''">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <div class="flex-1" style="padding-left:10px;overflow:hidden;">
              <p class="text-ellipsis title blue-font">{{ item.goods_title }}</p>
              <p class="meal">套餐信息：{{ item.setmeal_title }}</p>
            </div>
          </div>
          <div class="flex flex-center color-666 font-16" style="width:3.5%;">x{{ item.amount }}</div>
          <div class="flex flex-column flex-center" style="width:9%">
            <p class="red-font"><span style="color:#666">实收：</span>￥{{ item.paid_total_rent }}</p>
          </div>
          <div style="width:8%" class="red-font flex flex-center">
            <p>￥{{ item.deduct_amount }}</p>
          </div>
          <div style="width:8%" class="flex flex-column flex-center">
            <p class="red-font">￥{{ item.foregift }}</p>
            <p class="color-999 font-12">{{ item.foregift_deduct == 0 ? '押金冻结' : item.foregift > 0 ? '部分免押' : '押金全免' }}</p>
            <p v-if="item.setmeal_foregift && item.foregift_deduct > 0" class="color-999 font-12" style="text-decoration:line-through">￥{{ item.setmeal_foregift }}</p>
          </div>
          <div style="width:7.5%" class="flex flex-column flex-center">
            <p class="color-666">{{ item.refund_type == 1 ? '仅退款' : '退货退款' }}</p>
          </div>
          <div style="width:13.5%" class="flex flex-center font-12 color-666">{{ item.refund_reason }}</div>
          <div style="width:9%" class="flex flex-column flex-center">
            <!-- 退款状态 0全部 2用户申请退款 3平台待审核 4审核拒绝 6退款完成	 -->
            <el-tag v-if="item.refund_status_name" :type="item.refund_status == 6 ? 'success' : item.refund_status == 4 ? 'danger' : 'warning'">
              {{ item.refund_status_name }}
            </el-tag>
          </div>
          <div style="width:16%;overflow: auto;" class="btns flex align-center">
            <el-button v-if="$hasMethod('#agree') && (item.refund_status == 2 || item.refund_status == 3)" size="mini" type="warning" @click="agreeRefund(item)">同意退款</el-button>
            <el-button v-if="$hasMethod('#refuse') && (item.refund_status == 2 || item.refund_status == 3)" size="mini" type="danger" @click="refuseRefund(item)">拒绝退款</el-button>
            <el-button size="mini" type="primary" @click="checkRefund(item)">查看详情</el-button>
            <!-- <el-button
              v-if="$hasMethod('#resubmit') && item.refund_status == 4"
              size="mini"
              type="warning"
              @click="resubmit(item.id)"
            >重新提交</el-button> -->
            <!-- <el-button
              size="mini"
              type="primary"
              @click="checkLogistics(item.id)"
            >查看物流</el-button> -->
          </div>
        </div>
      </div>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
    <!-- 重新提交 -->
    <el-dialog title="重新提交" :visible.sync="resubmitVisible" width="25%" center>
      <span>您确定要重新提交退款吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resubmitVisible = false">取 消</el-button>
        <el-button type="primary" @click="resubmit_sure">确 定</el-button>
      </span>
    </el-dialog>
    <agree-refund ref="agreeRefund" :refund-id="currentId" :order-id="orderId" :refund-status="refundStatus" />
    <refuse-refund ref="refuseRefund" :refund-id="currentId" :refund-status="refundStatus" />
  </div>
</template>

<script>
import { orderRefundList, adminCheckPass } from '@/api/orderRefund'
import agreeRefund from './dialog/agreeRefund.vue'
import refuseRefund from './dialog/refuseRefund.vue'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
export default {
  components: { customPage, myDatePicker, agreeRefund, refuseRefund },
  data() {
    return {
      searchForm: {
        order_no: '',
        refund_status: '',
        create_time: '',
        shopname: ''
      },
      count: {
        admin_nocheck: 0,
        order_total_count: 0,
        refund_finish: 0,
        refund_rufuse: 0,
        user_apply_refund: 0
      },
      activeName: '0',
      total: 0,
      tableData: [],
      currentId: '',
      orderId: '',
      refundStatus: '',
      resubmitVisible: false
    }
  },
  mounted() {
    // console.log('mounted', 11)
    if (this.$route.params.tradeNo) {
      this.searchForm.order_no = this.$route.params.tradeNo
    }
    this.getList()
  },
  methods: {
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      orderRefundList({
        page,
        pageSize,
        ...this.searchForm,
        order_status: this.activeName
      }).then(res => {
        const { count, data } = res
        this.tableData = data || []
        this.total = res.total || 0
        this.count = count
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        order_no: '',
        refund_status: '',
        create_time: '',
        shopname: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    changeSelect(val) {
      this.searchForm.refund_status = val
    },
    agreeRefund(row) {
      this.currentId = row.id
      this.orderId = row.order_id
      this.refundStatus = row.refund_status
      this.$refs.agreeRefund.dialogVisible = true
      this.$refs.agreeRefund.isSuccess = true
    },
    refuseRefund(row) {
      this.currentId = row.id
      this.refundStatus = row.refund_status
      this.$refs.refuseRefund.dialogVisible = true
    },
    checkRefund(row) {
      // console.log('确定', row)
      const id = row.order_id
      this.$router.push({ name: 'refundDetail', params: { id }})
    },
    resubmit(id) {
      this.currentId = id
      this.resubmitVisible = true
    },
    resubmit_sure() {
      adminCheckPass(this.currentId).then(res => {
        this.resubmitVisible = false
      })
    },
    checkLogistics(id) {
      this.currentId = id
    }
  }
  // activated() {
  //   console.log('activated', 22)
  // }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  text-align: center;
}

.el-tag.el-tag--warning {
  background-color: #fff6ed;
  border-color: #ff9f38;
  color: #ff9f38;
}

.el-tag.el-tag--success {
  background-color: #e9f6ef;
  border-color: #4ccb86;
  color: #4ccb86;
}

.child_page {
  padding: 30px;
}

.common_form_search {
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.list_wrap {
  position: sticky;
  top: 0;
  z-index: 2;
}

.list_header {
  // position: sticky;
  // top: 0;
  // left: 0;
  // right: 0;
  height: 50px;
  line-height: 50px;
  z-index: 2;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;

  p {
    height: 100%;
    font-size: 16px;
    overflow: hidden;
  }

  p:not(:first-child) {
    border-left: 1px solid #e6e6e6;
  }
}

.list_item {
  border: 1px solid #e6e6e6;
  margin-top: 10px;
}

.item_row {
  border-top: 1px solid #e6e6e6;

  &>div {
    padding: 10px;
    color: #666666;

    &:not(:first-child) {
      border-left: 1px solid #e6e6e6;
    }
  }
}

.item_header {
  height: 45px;
  background-color: #f5f5f5;

  &>div p {
    color: #666666;
    font-size: 12px;
    padding-left: 20px;
  }
}

.title {
  font-size: 14px;
  padding: 10px 0;
}

.meal {
  font-size: 12px;
  color: #999999;
  line-height: 23px;
}

.item_row p {
  line-height: 15px;
}

.item_row div {
  line-height: 20px;
}
</style>
